<!-- <template>

    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
        :default-active="route.path" text-color="#fff">
        <h3>后台管理页面</h3>
        <el-menu-item v-for="item in noChildren" :index="item.path" :key="item.path" @click="goToHanlder(item.path)">
            <component class="icons" :is="item.icon"></component>
            <span>{{ item.label }}</span>
        </el-menu-item>


        <el-sub-menu v-for="item in hasChildren" :index="item.path" :key="item.path">
            <template #title>
                <component class="icons" :is="item.icon"></component>
                <span>{{ item.label }}</span>
            </template>
            <el-menu-item-group>
                <el-menu-item v-for="subItem in item.children" :index="subItem.path" :key="subItem.path"
                    @click="() => router.push(subItem.path)">
                    <component class="icons" :is="subItem.icon"></component>
                    <span>{{ subItem.label }}</span>
                </el-menu-item>

            </el-menu-item-group>

        </el-sub-menu>

    </el-menu>

</template>


<script setup>
import { useRouter } from 'vue-router'
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'

const router = useRouter()

const route = useRoute()


const menus = ref([

    {
        path: '/index',
        label: '首页',
        name: 'home',
        icon: 'house',
    },
    {
        path: '/book',
        name: 'book',
        label: '图书管理',
        icon: 'notebook',
    },
    {
        path: '/user',
        name: 'user',
        label: '用户管理',
        icon: 'user',
    },

    {
        path: '/other',
        label: '其它页面',
        icon: 'location',
        children: [
            {

                path: '/other/page1',
                name: 'page1',
                label: '页面一',
                icon: 'setting',
                url: 'PageOne'
            },
            {
                path: '/other/page2',
                name: 'page2',
                label: '页面二',
                icon: 'setting',
                url: 'PageTwo'
            }

        ]

    }

])


const goToHanlder = (path) => {
    return router.push(path)
}

const noChildren = computed(() => menus.value.filter(item => !item.children))

const hasChildren = computed(() => menus.value.filter(item => item.children))


</script>

<style scoped>
.icons {
    width: 18px;
    height: 18px;

    margin-right: 5px;
}

.el-menu {
    border-right: none;
    height: 800px;
    width: 180px;
}

h3 {
    text-align: center;
    color: white;

}
</style> -->


<template>

    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
        :default-active="route.path" text-color="#fff">
        <h3>后台管理页面</h3>
        <el-menu-item v-for="item in noChildren2" :index="item.path" :key="item.path" @click="goToHanlder(item.path)">
            <component class="icons" :is="item.icon"></component>
            <span>{{ item.label }}</span>
        </el-menu-item>


        <el-sub-menu v-for="item in hasChildren2" :index="item.path" :key="item.path">
            <template #title>
                <component class="icons" :is="item.icon"></component>
                <span>{{ item.label }}</span>
            </template>
            <el-menu-item-group>
                <el-menu-item v-for="subItem in item.children" :index="subItem.path" :key="subItem.path"
                    @click="() => router.push(subItem.path)">
                    <component class="icons" :is="subItem.icon"></component>
                    <span>{{ subItem.label }}</span>
                </el-menu-item>

            </el-menu-item-group>

        </el-sub-menu>

    </el-menu>

</template>


<script setup>
import { useRouter } from 'vue-router'
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '../stores/useUser'


const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const userInfo = userStore.getUserInfo()// 获取用户信息
const menus = ref([
    {
        path: '/index',
        label: '首页',
        name: 'home',
        icon: 'house',
        role: ['admin', 'teacher', 'student']// 角色权限控制
        //#### 角色权限控制：可以通过判断用户角色来过滤菜单项，确保只有具有相应角色的用户才能看到对应的菜单项。
    },
    {
        path: '/book',
        name: 'book',
        label: '图书管理',
        icon: 'notebook',
        role: ['admin', 'teacher']// 角色权限控制
    },
    {
        path: '/user',
        name: 'user',
        label: '用户管理',
        icon: 'user',
        role: ['admin', 'teacher']// 角色权限控制
    },
    {
        path: '/competition',
        name: 'competition',
        label: '竞赛管理',
        icon: 'trophy',
        role: ['admin', 'teacher', 'student']// 角色权限控制
    },
    {
        path: '/borrow',
        name: 'borrow',
        label: '借阅管理',
        icon: 'CreditCard',
        role: ['admin', 'student']// 角色权限控制
    },
    {
        path: '/other',
        label: '设置',
        icon: 'location',
        role: ['admin'],// 角色权限控制
        children: [
            {

                path: '/other/page1',
                name: 'page1',
                label: '页面一',
                icon: 'setting',
                url: 'PageOne'
            },
            {
                path: '/other/page2',
                name: 'page2',
                label: '页面二',
                icon: 'setting',
                url: 'PageTwo'
            }

        ]

    }

])


const goToHanlder = (path) => {
    return router.push(path)
}



//计算属性 noChildren2：
// 这个计算属性返回一个新的数组，该数组包含了menus中所有没有子菜单项（即item.children为false或undefined）
// 且其role数组包含当前用户角色（userInfo.role）的菜单项。
// 简单来说，它过滤出用户有权访问的 无子菜单的菜单项。
const noChildren2 = computed(() =>
    menus.value.filter(item => !item.children && item.role.includes(userInfo.role)))
// 过滤出所有没有紫菜单的菜单选项( !item.children)，并且用户角色信息与包含在菜单项的role数组中的信息对应的菜单项(item.role.includes(userInfo.role))
//即用户有权访问的无子菜单的菜单项。

// 计算属性 hasChildren2：
// 这个计算属性返回一个新的数组，该数组包含了menus中所有有子菜单项（即item.children为真值）
// 且其role数组包含当前用户角色（userInfo.role）的菜单项。
// 简单来说，它过滤出用户有权访问的有子菜单项。
const hasChildren2 = computed(() =>
    menus.value.filter(item => item.children && item.role.includes(userInfo.role)))
// 过滤出所有有子菜单的菜单选项(item.children)，并且用户角色信息与包含在菜单项的role数组中信息对应的菜单项(item.role.includes(userInfo.role))。



</script>

<style scoped>
.icons {
    width: 18px;
    height: 18px;

    margin-right: 5px;
}

.el-menu {
    border-right: none;
    height: 800px;
    width: 180px;


}

h3 {
    text-align: center;
    color: white;

}
</style>